<div class="m-2">
    <i class="fa fa-eye mr-1"></i><label class="title">{{proj_name}}成员管理</label>
    <a href="#" class="btn-link pull-right" data-toggle="modal" data-target="#mdl-add-member"><i class="fa fa-plus mr-1"></i>添加成员</a>
    <hr class="m-0">
    
    <table class="table table-sm table-bordered mt-2">
        <thead class="thead-light">
            <tr>
                <th scope="col">#</th>
                <th scope="col">名称</th>
                <th scope="col">角色</th>
                <th scope="col">管理员</th>
                <th scope="col">操作</th>
            </tr>
        </thead>
        <tbody>
            {% for idx, info in ipairs(members) do %}
            <tr>
                <th scope="row">{{idx}}</th>
                <td>{{info.user}}</td>
                <td>{{roles[info.role]}}</td>
                <td><i class="fa {{info.is_admin == 1 and 'fa-check-square-o' or 'fa-square-o'}}"></i></td>
                <td>
                    <button type="button" class="btn btn-sm btn-info" data-toggle="modal" data-target="#mdl-edit-member" data-uid="{{info.uid}}" data-role="{{info.role}}" data-uname="{{info.user}}" data-isadmin="{{info.is_admin}}">修 改</button>
                    <button type="button" class="btn btn-sm btn-danger" data-toggle="modal" data-target="#mdl-del-member" data-uid="{{info.uid}}" data-uname="{{info.user}}">删 除</button>
                </td>
            </tr>            
            {% end %}
        </tbody>
    </table>
</div>

<div id="mdl-add-member" class="modal" tabindex="-1" role="dialog">
    <div class="modal-dialog model-sm" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">添加成员</h5>
            </div>
            <div class="modal-body">
                <div id="err"></div>

                <div id="waiting" class="text-center text-muted">
                    <i class="fa fa-spinner fa-spin fa-3x fa-fw"></i>
                    <h1>加载其他成员列表中...</h1>
                </div>

                <form id="form-add-member">
                    <input id="pid" name="pid" type="number" value="{{proj_id}}" hidden>

                    <div class="form-group">
                        <label for="uid">可添加成员</label>
                        <select class="form-control" id="uid" name="uid">
                        </select>
                    </div>

                    <div class="form-group">
                        <label for="role">职位分工</label>
                        <select class="form-control" id="role" name="role">
                            {% for idx, title in ipairs(roles) do %}
                            <option value="{{idx}}">{{title}}</option>
                            {% end %}
                        </select>
                    </div>

                    <div class="form-group">
                        <div class="form-check">
                            <input class="form-check-input" type="checkbox" id="is_admin" name="is_admin">
                            <label class="form-check-label" for="is_admin">
                            拥有管理权限
                            </label>
                        </div>
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-primary" onclick="return add_member();">确  定</button>
                <button type="button" class="btn btn-secondary" data-dismiss="modal">取  消</button>
            </div>
        </div>
    </div>
</div>

<div id="mdl-edit-member" class="modal" tabindex="-1" role="dialog">
    <div class="modal-dialog model-sm" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">修改成员</h5>
            </div>
            <div class="modal-body">
                <div id="err"></div>

                <form id="form-edit-member">
                    <input id="uid" name="uid" type="number" hidden>
                    <input id="pid" name="pid" type="number" value="{{proj_id}}" hidden>

                    <div class="form-group">
                        <p class="form-text-static">成员名：<span id="name"></span></p>
                    </div>

                    <div class="form-group">
                        <label for="role">职位分工</label>
                        <select class="form-control" id="role" name="role">
                            {% for idx, title in ipairs(roles) do %}
                            <option value="{{idx}}">{{title}}</option>
                            {% end %}
                        </select>
                    </div>

                    <div class="form-group">
                        <div class="form-check">
                            <input class="form-check-input" type="checkbox" id="is_admin" name="is_admin">
                            <label class="form-check-label" for="is_admin">
                            拥有管理权限
                            </label>
                        </div>
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-primary" onclick="return edit_member();">确  定</button>
                <button type="button" class="btn btn-secondary" data-dismiss="modal">取  消</button>
            </div>
        </div>
    </div>
</div>

<div id="mdl-del-member" class="modal" tabindex="-1" role="dialog">
    <div class="modal-dialog model-sm" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">修改成员</h5>
            </div>
            <div class="modal-body">
                <div id="err"></div>

                <form id="form-del-member">
                    <input id="uid" name="uid" type="number" hidden>
                    <input id="pid" name="pid" type="number" value="{{proj_id}}" hidden>
                    请确认需要删除的成员：<span id="name" class="text-danger"></span>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-danger" onclick="return del_member();">确  定</button>
                <button type="button" class="btn btn-secondary" data-dismiss="modal">取  消</button>
            </div>
        </div>
    </div>
</div>

<script>

$('#mdl-add-member').on('show.bs.modal', function(e) {
    var btn = $(e.relatedTarget);
    $('#mdl-add-member #wating').show();
    $('#mdl-add-member #form-add-member').hide();

    $.post('/dashboard/projects/get_invite_users', { pid: '{{proj_id}}' }, function(ret) {
        if (ret.ok) {
            $('#mdl-add-member #err').empty();
            $('#mdl-add-member #uid').empty();
            $('#mdl-add-member #waiting').hide();
            $('#mdl-add-member #form-add-member').show();

            $.each(ret.users, function(i, info) {
                $('#mdl-add-member #uid').append('<option value="' + info.uid + '">' + info.uname + '</option>');
            });

            $('#mdl-add-member #uid').val(ret.users[0].uid);
        } else {
            $('#mdl-add-member #waiting').hide();
            showError('#mdl-add-member #err', '获取邀请成员列表失败！', ret.err_msg);
        }
    }, 'json');
});

$('#mdl-edit-member').on('show.bs.modal', function(e) {
    var btn = $(e.relatedTarget);

    $('#mdl-edit-member #uid').val(btn.data('uid'));
    $('#mdl-edit-member #role').val(btn.data('role'));
    $('#mdl-edit-member #name').text(btn.data('uname'));
    $('#mdl-edit-member #is_admin').get(0).checked = btn.data('isadmin') == '1';
});

$('#mdl-del-member').on('show.bs.modal', function(e) {
    var btn = $(e.relatedTarget);

    $('#mdl-del-member #uid').val(btn.data('uid'));
    $('#mdl-del-member #name').text(btn.data('uname'));
});

function add_member() {
    $.ajax({
        url: '/dashboard/projects/add_member',
        type: 'POST',
        data: new FormData(document.getElementById('form-add-member')),
        dataType: 'json',
        processData: false,
        contentType: false,
        cache: false,
        success: function(rsp) {
            if (rsp.ok) {
                $('.modal').modal('hide');
                last_pressed_button.click();
            } else {
                showError('#mdl-add-member #err', '添加成员失败', rsp.err_msg);
            }
        }
    });
}

function edit_member() {
    $.ajax({
        url: '/dashboard/projects/edit_member',
        type: 'POST',
        data: new FormData(document.getElementById('form-edit-member')),
        dataType: 'json',
        processData: false,
        contentType: false,
        cache: false,
        success: function(rsp) {
            if (rsp.ok) {
                $('.modal').modal('hide');
                last_pressed_button.click();
            } else {
                showError('#mdl-edit-member #err', '修改成员信息失败', rsp.err_msg);
            }
        }
    });
}

function del_member() {
    $.ajax({
        url: '/dashboard/projects/del_member',
        type: 'POST',
        data: new FormData(document.getElementById('form-del-member')),
        dataType: 'json',
        processData: false,
        contentType: false,
        cache: false,
        success: function(rsp) {
            if (rsp.ok) {
                $('.modal').modal('hide');
                last_pressed_button.click();
            } else {
                showError('#mdl-del-member #err', '删除成员失败', rsp.err_msg);
            }
        }
    });
}

</script>